<template>
	<view>
		<uni-nav-bar title="投诉" :statusBar="true" :border="false" left-icon="back" :fixed="true"
			@clickLeft="$tab.back()">
		</uni-nav-bar>

		<view class="bg-F8F8F8" style="height: 16rpx;">

		</view>

		<view class="px-32 py-48">
			<u--textarea v-model="form.detail" placeholder="请输入投诉内容"  height="400rpx"></u--textarea>

			<u-divider></u-divider>


			<htz-image-upload v-model="uploadList" uploadText='投诉图片' :headers="headers" :action="action"
				@uploadSuccess="uploadFiles" :max="3"></htz-image-upload>
		</view>

		<view class="bottom iphoneX">
			<view class="confirm text-center text-FFF text-32 bg-theme" @click="confirm">
				投诉
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth.js"
	export default {
		data() {
			return {
				form: {
					detail: "",
					icons: "",
					relId:null,
					type:null
				},
				headers: {
					'Authorization': 'Bearer ' + getToken()
				},
				action: getApp().globalData.config.baseUrl + '/common/upload',
				uploadList: [],
			};
		},
		onLoad(e) {
			this.form.relId = e.id
			this.form.type = e.type
		},
		methods: {
			uploadFiles(e) {
				let data = JSON.parse(e.data)
				this.uploadList.push(data.url)
			},
			async confirm() {
				if (this.uploadList.length == 0 && this.form.detail == "") {
					this.$modal.msg('请输入内容或者上传图片!')
					return
				}
			
				if (this.uploadList.length != 0) {
					this.form.icons = this.uploadList.join(',')
				}
			
				const res = await this.$Api.chat.complain(this.form)
				
				this.$modal.msg('投诉内容已提交!')
				
				this.$tab.back(1500)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF !important;
	}

	.bottom {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 9;

		.confirm {
			width: 686rpx;
			height: 88rpx;
			background: #000000;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			line-height: 88rpx;
			margin: 0 auto 20rpx;
		}
	}

	.u-radio-group {
		flex: 0 1 auto;
	}

	/* #ifdef APP */
	/deep/ .u-radio-group {
		margin-left: 250rpx;
	}

	/* #endif */
</style>